<script lang="ts" setup>
defineProps({
  text: { type: String, default: '' },
  rows: { type: Number, default: 0 },
  danger: { type: [Boolean, Number], default: false },
})

</script>
<template>
  <a-tooltip>
    <template #title>{{ text }}</template>
    <span class="media-text" :style="`--rows:${rows}`">{{ text }}</span>
  </a-tooltip>
</template>

<style lang="less">
.media-text {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: var(--rows);
  -webkit-box-orient: vertical;
}
</style>
